<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="dist/mermaid.css"/>
    <script>

    </script>
    <script src="dist/mermaid.js"></script>
    <style>
        body{
            background-color: #89896f;
        }

    </style>

</head>
    <body>
        <h1><i class="fa fa-camera-retro"></i> Font awesome support!</h1>
        <div class="mermaid" id="i211">
        groph LR
            A["A double quote:#quot;"] -->B["fa:fa-twitter nu springer vi"]
            B                          -->C[fa:fa-ban nu springer vi]
            C-->                          D(fa:fa-spinner);
            D-->                          E(En fa:fa-camera-retro kanske?);
        </div>
        <div class="mermaid" id="i211">
            sequenceDiagram
            Ali#45;ce->>John: Hello John, how are you? #60;
            John-->>Alice: Great!#quot;
        </div>
    </body>
</html>
